<template>

	<div class="page">
		<div class="table-view" v-infinite-scroll="getData" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
		  <li class="cell" v-for="(s,index) in items">
		  	<div class="redpackage-content">
		  		<div class="left-content" v-if="type == 'redPackage'">
		  			<div class="title">{{s.name}}</div>
		  			<div class="package">+{{s.money}}元</div>
		  			<div>{{s.createdDate | formatDate}}</div>
		  		</div>
		  		<div class="left-content" v-if="type != 'redPackage'">
		  			<div class="title">{{s.shop_name}}</div>
		  			<div class="package">+{{s.money}}分</div>
		  			<div>{{s.created_date | formatDate}}</div>
		  		</div>
		  		<div class="right-content">
		  			<div class="getit" :class="{'getit-used':s.status != '1'}" @click="useit(s.pkId,s.money,s.status)">{{s.status == '1'?'去使用':'已使用或已过期'}}</div>
		  		</div>
		  	</div>
		  </li>
		</div>
		<div id="mask" @click="hidden()" v-show="showQr">
			<div class="content">
				<div id="qr"></div>
			</div>
		</div>
	</div>
</template>


<style>
	@import url("member-center-redpackage.css");
	@import url("../../common/common.css");
</style>
<script>
	import $ from 'jquery'
	import QRCode from 'qrcodejs2'
	export default{
		name:'register',
		data:function(){
			return {
				items:[
				],
				mobile:'',
				type:'',
				loading:false,
				showQr:false
			}
		},
		created(){
			this.mobile = this.$route.params.mobile;
			this.type = this.$route.params.type;
			if(this.type == 'redPackage'){
				document.title = '红包记录'
			}else{
				document.title = '积分记录'
			}
		},
		methods:{
			qrcode(codeId,content){
				let qrcode = new QRCode(codeId, {  
			      width: 200,  // 设置宽度 
			      height: 200, // 设置高度
			      text: content
			 }) ;
			},
			hidden(){
				this.showQr = false;	
			},
			getData(){
				var _self = this;
				this.loading = true;
				this.$Spin.show();
				$.ajax({
				  	type:"post",
				  	contentType:'application/json;charset=UTF-8',
				  	url:this.utils.rootUrl + "vip/redPackageAndIntegrals/"+_self.mobile+"/"+_self.type,
				  	data:JSON.stringify({
				  	}),
				  	success:function(res){
				  		_self.$Spin.hide();
				  		_self.loading = true;
				  		for(var index in res.data.reds){
				  			var item = res.data.reds[index];
				  			_self.items.push(item);
				  		}
				  	},
				  	error:function(e){
				  		_self.$Spin.hide();
				  		_self.loading = true;
				  	}
				  });
			},
			useit(pkId , money,status){
				if(status != '1'){
					return;
				}
				this.showQr = true;	
				$('#qr').empty();
				var qrJson = {pkId:pkId,money:money}
				this.$nextTick (function () {
					this.qrcode('qr',JSON.stringify(qrJson));
				})
			}
		},
        filters: {
	        formatDate(time) {
	            return new Date(parseInt(time)).toISOString().substr(0,10);
	        }
	    }
	}
</script>

